<template>
  <div id="newest">
          <h3>最新音乐</h3>
         <ul class="music">
        <template tag='ul' v-for="item in music">
            <li :key='item.id' @click="bof(item.id)">
                <p>{{item.name}}</p>
                <span>{{item.song.artists[0].name}} - {{item.name}}</span>
                <i class="iconfont icon-bofang"></i>
            </li>
        </template>
         </ul>
  </div>
</template>

<script>
export default {
props:['music'],
methods:{
    bof(id){
        this.$router.push({name:"bo", query:{id}})
    }
}
}
</script>

<style lang='scss' scoped>
      #newest{
          h3{
              margin: _vw(14);
          }
            .music{
               li{
                   border-bottom: 1px solid #c1c1c1 ;
                   padding: _vw(12);
                   position: relative;
                   p{
                       width: _vw(600);
                       
                       font-size: _vw(34);
                       color: #333333;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      
                   }
                   span{
                       font-size: _vw(24);
                       color: #888888;
                   }
                   i{
                       position: absolute;
                       right: _vw(10);
                       top: _vw(18);
                       font-size: _vw(44);
                       color: #888888;
                   }
               }
           }
      }
</style>